<template>
  <div class="school-info">
    <Panel title="注册信息" icon="zhucechenggong">
      <el-row class="info-row">
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('school.schoolCode') }}</span>
          <span class="info-text">{{ userInfo.schoolCode }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('field.registerTime') }}</span>
          <span class="info-text">{{ userInfo.registerTime }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('field.lastLoginTime') }}</span>
          <span class="info-text">{{ userInfo.lastLoginTime }}</span>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('field.registerAccount') }}</span>
          <span class="info-text">{{ userInfo.account }}</span>
        </el-col>
      </el-row>
    </Panel>
    <Panel title="基本信息" icon="jibenxinxi">
      <el-form
        class="school-info-form"
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="140px"
        size="small"
        inline
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="schoolName" :label="$t('school.schoolName')">
              <el-input
                v-model="formData.schoolName"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="socialCreditCode"
              :label="$t('field.socialCreditCode')"
            >
              <el-input
                v-model="formData.socialCreditCode"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="schoolType" :label="$t('school.schoolType')">
              <el-select
                v-model="formData.schoolType"
                :placeholder="$tSelect()"
              >
                <el-option
                  v-for="item in dictData['school_type']"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="schoolScale" :label="$t('school.schoolScale')">
              <el-select
                v-model="formData.schoolScale"
                :placeholder="$tSelect()"
              >
                <el-option
                  v-for="item in dictData['school_scale']"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="schoolAddress"
              :label="$t('school.schoolAddress')"
            >
              <el-input
                v-model="formData.schoolAddress"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="duty" :label="$t('school.duty')">
              <el-input v-model="formData.duty"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="contactName" :label="$t('field.contactName')">
              <el-input
                v-model="formData.contactName"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="contactMobile"
              :label="$t('field.contactMobile')"
            >
              <el-input
                v-model="formData.contactMobile"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              prop="reservedContactName"
              :label="$t('field.reservedContactName')"
            >
              <el-input
                v-model="formData.reservedContactName"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="reservedContactMobile"
              :label="$t('field.reservedContactMobile')"
            >
              <el-input
                v-model="formData.reservedContactMobile"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="app-btns">
          <el-button
            size="small"
            type="primary"
            @click="submitForm"
            :loading="submiting"
            >保存</el-button
          >
        </div>
      </el-form>
    </Panel>
  </div>
</template>

<script>
import { dictMixin } from 'mixins'
import { Panel } from 'components'
import { updateInfo } from 'services/school/school'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'SchoolInfo',
  mixins: [dictMixin],
  dicts: ['school_type', 'school_scale'],
  components: { Panel },
  data() {
    return {
      formData: {},
      submiting: false
    }
  },
  computed: {
    ...mapState(['userInfo']),
    rules() {
      return {
        schoolName: this.$rule('school.schoolName', {
          required: true
        }),
        socialCreditCode: this.$rule('field.socialCreditCode', {
          required: true
        }),
        contactName: this.$rule('field.contactName', {
          required: true
        }),
        contactMobile: this.$rule('field.contactMobile', {
          required: true
        }),
        duty: this.$rule('school.duty', {
          required: true
        }),
        schoolType: this.$rule('school.schoolType', {
          required: true,
          trigger: 'blur'
        }),
        schoolScale: this.$rule('school.schoolScale', {
          required: true,
          trigger: 'blur'
        }),
        schoolAddress: this.$rule('school.schoolAddress', {
          required: true
        })
      }
    }
  },
  methods: {
    ...mapMutations({
      setUserInfo: 'setUserInfo'
    }),
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submiting = true
        const { data } = await updateInfo(this.formData)
        this.setUserInfo(data)
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData = { ...this.userInfo }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.school-info {
  .panel {
    margin-top: 0.2rem;
    &:first-child {
      margin-top: 0;
    }
  }
  .school-info-form {
    padding: 0.2rem 0;
    .el-form-item {
      display: flex;
    }
    .el-form-item__content {
      flex: 1;
      width: 100% !important;
    }
    .el-input {
      width: 100%;
    }
  }
}
</style>
